<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点事件</title>
  <style>
    .A{
      width: 70%;
      margin-left: 30%;
    }
    #top{
      width: 60%;
      background-color: white;
      text-align: left;
    }
    #Main{
      width: 60%;
      background-color: white;
      text-align: center;
    }
    input{
      width: 200px;
      height: 40px;
      margin-top: 25px;
      margin-left: 30px;
    }
    #btn{
      width: 100px;
      height: 35px;
      margin-top: 15px;
    }
  </style>
</head>
<body style="background-color: grey;">
<!--获得焦点focus,获得焦点focus,获得焦点focus-->
<!--失去焦点blur，失去焦点blur，失去焦点blur-->
<div class="A">
  <div id="top">提示:没有提示</div>
  <div id="Main">
    <h1>注册</h1>
    账号<input type="text" id="username" placeholder="请输入账户"><br>
    密码<input type="password" id="password" placeholder="请输入密码"><br>
    <button id="btn">注册</button>
  </div>
</div>
<script>
  const btn=document.getElementById('btn');
  var uN=document.getElementById('username');
  var pS=document.getElementById('password');

  uN.onblur=function (){
    tempN=uN.value;
    uN.value='';
    uN.placeholder='继续输入账户，如无请忽略';
  }
  uN.onfocus=function (){
    uN.value=tempN;
  }
  pS.onblur=function (){
    tempP=pS.value;
    pS.value='';
    pS.placeholder='继续输入密码，如无请忽略'
  }
  pS.onfocus=function (){
    pS.value=tempP;
  }
  btn.onclick=function (){
    // if(uN.value===null || pS.value===null){
    //   alert('账号或密码不能为空');
    // }else{
    //   if(uN.value!=='username' || pS.value!=='password'){
    //     alert('账号或密码不匹配');
    //     uN.placeholder='请输入账户';
    //     pS.placeholder='请输入密码';
    //   }
    // }
    alert('注册成功!');
    uN.placeholder='请输入账户';
    pS.placeholder='请输入密码';
  }
</script>
</body>
</html>